<template>
  <div>
    <!-- A模块数据 -->
    <div>
      直接取{{$store.state.moduleA.username}}<br/>
      getter取{{$store.getters['newName']}}
    </div>
    <!-- A模块数据 -->
    <div>
      直接取{{$store.state.moduleB.username}}<br/>
      getter取{{$store.getters['moduleB/newName']}}
    </div>
    {{age}}
    <button @click="handleClick">更改</button>

    <div>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { computed } from '@vue/reactivity'

export default {
  name: 'App',
  setup (props, ctx) {
    const store = useStore()
    const router = useRouter()
    console.log(store.getters)
    const name = computed(() => {
      return store.getters.newName
    })
    const age = computed(() => {
      return store.state.age
    })
    console.log(name)
    const handleClick = () => {
      store.commit('setName', '111')
      store.dispatch('updateAge', 17)
      store.dispatch('moduleB/setName')
      store.commit('updateName')
      // store.commit('moduleB/updateName')
    }

    return {
      name,
      handleClick,
      age
    }
  }
}
</script>

<style>

</style>
